<%--
  Created by IntelliJ IDEA.
  User: Shinelon
  Date: 2020/11/30
  Time: 16:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="${pageContext.request.contextPath}/style/assets/css/style.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/style/assets/css/responsive.css">
<script src="${pageContext.request.contextPath}/style/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css">
<script src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
<html>
<head>
    <title>前台管理</title>
    <script>

        $(function () {
            //拿到父页面元素的值
            var id = $('#hideCollectionId', parent.document).html();
            var orderid = $('#hideCollectionId1', parent.document).html();
            var rz = $('#hideCollectionId2', parent.document).html();
            var leave = $('#hideCollectionId3', parent.document).html();
            var num =  $('#hideCollectionId4', parent.document).html();
            console.log("num::"+num)

            // $("#count").html(num);
            //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
            layui.use(['element','layer','form'], function(){
                var element = layui.element;
                var layer = layui.layer;
                var form = layui.form;
                allroom();
                //生成该类型所有的房间号的函数
                function allroom(){

                    $.ajax({
                        url:'/Hotel/orderManage/selectByTID',
                        data:{typeid:id},
                        async:false,
                        success:function (d) {
                            console.log(d);
                            $("#ufather").find("li").remove()
                            for(var i = 0 ; i < d.length; i++){
                                var li = $("#temp").clone();
                                li.attr("id","");
                                li.attr("style","");
                                li.find(".rname").html(d[i].roomcode);
                                li.find(".yj").html(d[i].yj)
                                // var status = li.find(".status").html(d[i].status);
                                // if(d[i].status == 0){
                                //     li.find(".status").html('空闲')
                                // }else if(d[i].status == 1){
                                //     li.find(".status").html('入住')
                                // }
                                $("#ufather").append(li);
                            }

                        },
                        error:function () {
                            alert("失败")
                        }
                    })
                }

                //点击入住分配房间
                $("#ufather").on('click','input[value="入住"]',function () {
                    $("#addform")[0].reset();
                    var yj = $(this).prev().html()
                    var roomid = $(this).parent().parent().prev().children().html();
                    var t=new Date().getTime()
                    const date = new Date(t);
                    var outTradeNo="";
                    for(var i=0;i<4;i++) //6位随机数，用以加在时间戳后面。
                    {
                        outTradeNo += Math.floor(Math.random()*10);
                    }
                    var ruzhuid =date.getFullYear() +""+ (date.getMonth()+1) +""+ date.getDate()+""+outTradeNo+""+roomid;
                    //首先显示填写入住入信息
                    layer.open({
                        title:'入住人信息',
                        type:1,
                        content:$("#mesg"),
                        area:['500px','400px'],
                        success:function () {
                            form.val('msg', {
                                "orderid":orderid,
                                "rzyj":yj,
                                "roomid":roomid,
                                "leavedate1":leave,
                                "rzdate1":rz,
                                "ruzhuid":ruzhuid
                            });
                        }
                    })
                    form.on('submit(add)',function (data) {
                        console.log(data);
                        $.ajax({
                            url:"/Hotel/orderManage/ruzhudetail",
                            data:data.field,
                            success:function(d){
                                console.log(d)
                                layer.closeAll();
                                layer.msg("分配成功")
                                $('#addform')[0].reset();
                                var nnum = Number($("#count").html()) -1 ;
                                $("#count").html(nnum)
                                form.render();
                                allroom();
                                console.log( $("#count").html())
                                if(Number($("#count").html()) ==0){
                                    $("input[value='入住']").hide();
                                }
                            },
                            error:function () {
                                layer.closeAll();
                                alert("操作失败");
                            }
                        })
                        return false;
                    })
                })
            });
        })

    </script>
</head>
<body>
<%--li复制模范--%>
<li class="col-lg-2 col-md-2 col-sm-6 col-xs-12 best-room_li" id="temp" style="display: none">
    <div style="border:2px solid rebeccapurple;border-radius: 10px;background: #5FB878">
        <div >
            <div style="height: 50px;font-size: 20px;color: darkslategray;font-family: '楷体'" class="rname"></div>
        </div>
        <div  style="height: 50px;">
            <div>
                <div class="yj" style="display:none;"></div>
                <input type="button" value="入住" class="layui-btn-sm layui-btn-normal">
            </div>
        </div>
    </div>
</li>

    <section class="best-room" >

        <div class="container">
            <div class="title-main" style="position: relative;left:0px;top: -40px">
                需要分配的房间数量：<span id="count"></span>
            </div>
            <div class="best-room-carousel" >
                <ul class="row best-room_ul" id="ufather">

                </ul>
            </div>
        </div>
    </section>

    <div id="mesg" style="display: none">
        <form class="layui-form layui-form-pane" lay-filter="msg" id="addform">
            <div style="display: none"><input type="text" name="roomid"/></div>
            <div style="display: none"><input type="text" name="rzdate1"/></div>
            <div style="display: none"><input type="text" name="leavedate1"/></div>
            <div style="display: none"><input type="text" name="ruzhuid"/></div>
            <div class="layui-form-item">
                <label class="layui-form-label">订单号</label>
                <div class="layui-input-inline">
                    <input type="text"  name="orderid" readonly  autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text"  name="name" maxlength="4"lay-verify="required|characters"  autocomplete="off" class="layui-input" >
                </div>
                <div class="layui-form-mid layui-word-aux" class="">4个汉字</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                    <input type="text"  name="tel" maxlength="11"lay-verify="required|phone"  autocomplete="off" class="layui-input" >
                </div>
                <div class="layui-form-mid layui-word-aux" class="">11位手机号</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">身份证</label>
                <div class="layui-input-inline">
                    <input type="text" name="idcard" maxlength="18"lay-verify="required|identity"  autocomplete="off" class="layui-input" >
                </div>
                <div class="layui-form-mid layui-word-aux" class="">请输入真实身份证</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" >押金</label>
                <div class="layui-input-inline" style="width: 50px;margin-right: 0px">
                    <input type="text" name="rzyj" readonly  autocomplete="off" class="layui-input" >
                </div>
                <label class="layui-form-label" style="width: 50px;">元</label>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-warm" lay-submit lay-filter="add">入住该房间</button>
                </div>
            </div>
        </form>
    </div>
<%--正则--%>
<script>
    layui.use('form',function () {
        var form = layui.form;
        form.verify({
            characters:function(v){
                var numasc = 0;
                var charasc = 0;
                var otherasc = 0;
                for (var i = 0; i < v.length; i++) {
                    var asciiNumber = v.substr(i, 1).charCodeAt();
                    if (asciiNumber >= 48 && asciiNumber <= 57) {
                        numasc += 1;
                    }
                    if ((asciiNumber >= 65 && asciiNumber <= 90)||(asciiNumber >= 97 && asciiNumber <= 122)) {
                        charasc += 1;
                    }
                    if ((asciiNumber >= 33 && asciiNumber <= 47)||(asciiNumber >= 58 && asciiNumber <= 64)||(asciiNumber >= 91 && asciiNumber <= 96)||(asciiNumber >= 123 && asciiNumber <= 126)) {
                        otherasc += 1;
                    }
                }
                if(numasc > 0 || charasc>0 || otherasc>0)  {
                    return "只能输入中文";
                }
            } ,
        })
    })
</script>
</body>
</html>
